<!-- eslint-disable vue/multi-word-component-names -->

<template>
  <div class="headerBar">
    <div class="img"><img src="@/assets/头像.jpg" @click="onclick" alt=""></div>
    <typewriter />
    <div class="logoMain" @click="tiaozhuan">
      <div class="logo1"></div>
      <div class="logo2"></div>
    </div>

    <foote class="foot" />
  </div>
</template>

<script setup lang="ts">
import { isShow } from '@/utils/isShow'

const tiaozhuan = () => {
  window.location.href = "http://dai-lastyear.gitee.io/share-of-lastyear/html/read.html"
}
const onclick = () => {

  window.location.href = "tencent://message/?uin=1027919744"
}
isShow('foot')
// isShow('img')


</script>

<style scoped lang="scss">
.headerBar {
  width: 100vw;
  height: 100vh;
  text-align: center;
  position: relative;

  .img {
    margin-top: 120px;

    img {

      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.8);
      opacity: .8;
    }
  }

  .logoMain {
    position: relative;
    margin-top: 80px;
    height: 100px;
    width: 100%;
    transform-style: preserve-3d;

    .logo1 {
      background: url('@/assets/logo.png') no-repeat center center;
      height: 100px;
      width: 100%;
      transform: translateZ(-10px);

    }

    .logo2 {
      position: absolute;
      top: 8px;
      right: 8px;
      transform: translateZ(10px);
      background: url('@/assets/logo.png') no-repeat center center;
      height: 100px;
      width: 100%;
      opacity: .3;
    }
  }

  .foot {
    position: absolute;
    bottom: 0;
  }
}
</style>